import React, { Component } from 'react'
import { Button, Form, Input, ConfigProvider } from 'antd'
import { UserOutlined, CloseSquareOutlined } from '@ant-design/icons'
import 'antd/dist/antd.css'
import './component.css'
import 'moment/locale/zh-cn'
import zhCN from 'antd/es/locale/zh_CN'
import axios from 'axios'
class Login extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ddddd: '1212',
      instance: null,
      userInfo: {},
      refreshToken: '',
    }
  }
  componentWillMount() {}
  componentDidMount() {
    const instance = axios.create({
      baseURL: '/tmfs',
    })
    instance.defaults.withCredentials = true

    instance.interceptors.request.use((response) => {
      // 临时代码，用于模拟登录，上线时删除
      response.headers.subarea =
        'vQpct2AmilGHPmFSb9OSUylI7TkARGrLQI6CFI5xUuGxOG+op06hryqUu3QjO03ISKPg2TvKEqr/bt1jCop6YUZqZflJeOY9Czt0WFPKuQpJO0Mct7YmZRnVrjs3kTLScbapw9m3MRhmS/pOGfsik/i3LeXzX0+MaTO2qW+ecoo='
      response.headers.refreshToken = this.state.refreshToken

      return response
    })
    this.setState({ instance: instance })
    localStorage.setItem("refreshToken",'')
    // localStorage.setItem("userInfo",'')
    // localStorage.setItem("dictionary",'')
    // localStorage.setItem("config",'')
    // localStorage.setItem("authToken",'')
    // localStorage.setItem("empNo",'')
    // localStorage.setItem("deptList",'')

  }
  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }
  getUserBaseInfo = (data) => {
    this.state
      .instance({
        url: `/icanApi/home/userBaseInfo/getUserBaseInfo`,
        method: 'post',
        data: data,
      })
      .then((res) => {
        localStorage.setItem('userInfo', JSON.stringify(res.data.data))
        localStorage.setItem('empNo', JSON.stringify(res.data.data.empNo))
        this.getToken({ empNo: res.data.data.empNo })
      })
  }
  getToken = (param) => {
    this.state
      .instance({
        url: `/icanApi/auth/getToken`,
        method: 'get',
        params: param,
      })
      .then((res) => {
        this.setState({ authToken: res.data.data })
        localStorage.setItem('authToken', res.data.data)
        this.queryMenusByToken()
      })
  }
  queryMenusByToken = () => {
    this.state
      .instance({
        url: `/icanApi/auth/queryMenusByToken`,
        method: 'get',
      })
      .then((res) => {
        localStorage.setItem('config', JSON.stringify(res.data.data))
        window.location.href = window.location.origin
      })
  }
  //获取表格数据
  login = () => {
    const values = this.modifyFormRef.current.getFieldsValue()
    console.log('Success:', values)
    values.verify = false
    values.password = 'MTIz'
    console.log('instance:', this.state.ddddd)
    this.setState({ userInfo: values })
    this.state
      .instance({
        url: `/icanApi/login`,
        method: 'get',
        params: values,
      })
      .then((res) => {
        this.setState({ refreshToken: res.data.data })
        localStorage.setItem('refreshToken', res.data.data)
        this.getUserBaseInfo({ userAccount: values.userId })
      })
  }
  modifyFormRef = React.createRef() //绑定修改信息表单
  render() {
    return (
      <ConfigProvider locale={zhCN}>
        <div className="bodyContent">
          <div className="login">
            <div className="data-box1 left_tb fl">
              <i className="bottomL"></i>
              <i className="bottomR"></i>
              <i className="topL"></i>
              <i className="topR"></i>
              <div className="t1">用户登录</div>
              <Form ref={this.modifyFormRef} initialValues={{ remember: true }}>
                <div className="t-user-name">
                  <Form.Item
                    name="userId"
                    rules={[
                      {
                        required: true,
                        message: '请输入用户名!',
                      },
                    ]}
                  >
                    <Input
                      size="large"
                      placeholder="请输入用户名"
                      prefix={<UserOutlined />}
                    />
                  </Form.Item>
                </div>
                <div className="t-user-name">
                  <Form.Item
                    name="password"
                    rules={[
                      {
                        required: true,
                        message: '请输入密码!',
                      },
                    ]}
                  >
                    <Input.Password prefix={<CloseSquareOutlined />} />
                  </Form.Item>
                </div>
              </Form>
              <Button type="primary" onClick={this.login}>
                登录
              </Button>
              {/* <div className="t-user-name">
                <Input
                  size="large"
                  placeholder="请输入用户名"
                  value={this.state.userName}
                  prefix={<UserOutlined />}
                />
              </div>
              <div className="t-user-name">
                <Input.Password
                  prefix={<CloseSquareOutlined />}
                  value={this.state.password}
                  placeholder="请输入密码"
                />
              </div>
              <div>
                <Button type="primary" onClick={this.login}>
                  导出
                </Button>
              </div> */}
            </div>
          </div>
        </div>
      </ConfigProvider>
    )
  }
}
export default Login
